<template>
	<view class="nav_outer">
		<view @click="showDate = true" class="date_new">{{
			newDate == '' ? '选择需要查看信息的时间段' : newDate
		}}</view>
		<view class="content_message">
			<view style="margin-bottom: 20px">
				<view
					class="message_box"
					v-for="(item, index) in dataList"
					:key="index"
					@click="messageClick(item)"
				>
					<view class="message_name">
						<!-- <view> -->
						<view
							>医生姓名：<text>{{ item.doctorName }}</text></view
						>
						<view
							>挂号科室：<text>{{ item.deptName }}</text></view
						>
						<!-- </view> -->
						<!-- <view
							>挂号卡号：<text>{{ item.visitCardNo }}</text></view
						> -->
						<view
							>就诊费用：<text>{{ item.registerFee }}</text></view
						>
						<view
							>挂号时间：<text>{{ item.registerDate.split(' ')[0] }} </text>
							<text style="margin-left: 10rpx">{{
								item.serviceStartTime
							}}</text></view
						>
						<view
							>挂号类型：<text>{{
								item.registerType == 0 ? '预约' : '预约挂号'
							}}</text></view
						>
					</view>
					<view
						class="paymentState"
						:style="{
							color:
								item.chargeFlag == 0
									? nonPayment
									: item.chargeFlag == 1
									? havePiad
									: item.chargeFlag == 2
									? refund
									: ARefundOf,
						}"
						>{{
							item.chargeFlag == 0
								? '未支付'
								: item.chargeFlag == 1
								? '已支付'
								: item.chargeFlag == 2
								? '已退款'
								: '退款中'
						}}</view
					>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 80px; margin-top: 10px"
			><u-divider>暂无更多数据</u-divider>
		</view>
		<view class="safe"></view>
		<u-calendar
			v-model="showDate"
			ref="calendar"
			:start-text="startText"
			:end-text="endText"
			:range-color="rangeColor"
			:range-bg-color="rangeBgColor"
			:active-bg-color="activeBgColor"
			:max-date="getTime(7)"
			@change="changeTime"
			:mode="mode"
		></u-calendar>
		<u-modal
			v-model="ChooseShow"
			:content="content"
			@confirm="confirm"
		></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import getTime from '../../utils/time'
import { getPatientRegistrationInfo } from '../../http/api'
import { mapState } from 'vuex'

export default {
	data() {
		return {
			content: '您未选择就诊医院或未绑定就诊卡',
			ChooseShow: false,
			mode: 'range',
			showDate: false,
			startText: '开始',
			endText: '结束',
			rangeColor: '#5690FB',
			rangeBgColor: 'rgba(41,121,255,0.13)',
			activeBgColor: '#5690FB',
			newDate: '',
			nonPayment: 'orange',
			refund: 'red',
			havePiad: 'green',
			ARefundOf: '#0089ffe0',

			dataList: [],
			totalData: [],
			newDataList: [],
			formData: {
				pageNo: 1,
				pageNumber: 10,
			},
		}
	},
	onLoad() {
		wx.showLoading({
			title: '加载中',
			mask: true,
		})
		this.getPatient(this.orgId, this.patientIdentity, '', '')
	},
	computed: {
		...mapState({
			orgId: state => state.orgId,
			patientId: state => state.patientId,
			patientIdentity: state => state.patientIdentity,
		}),
	},
	methods: {
		getTime,
		// 格式化时间
		rTime(date) {
			let json_date = new Date(date).toJSON()
			return new Date(new Date(json_date) + 8 * 3600 * 1000)
				.toISOString()
				.replace(/T/g, ' ')
				.replace(/\.[\d]{3}Z/, '')
		},
		// 页面第一次加载总数据
		getPatient(orgId, idCard, queryStartDate, queryEndDate) {
			getPatientRegistrationInfo({
				orgId: orgId,
				idCard: idCard,
				queryStartDate: queryStartDate, //'',
				queryEndDate: queryEndDate, //'',
			}).then(({ data, head }) => {
				this.dataList = []
				this.totalData = []
				if (head.code == 200) {
					console.log(data)
					this.dataList = data.slice(0, this.formData.pageNumber)
					this.totalData = data
					wx.showToast({
						title: '加载成功',
					})
					// 成功后关闭刷新
					wx.stopPullDownRefresh()
					// 隐藏loading框
					wx.hideLoading()
					wx.hideNavigationBarLoading()
					console.log(data)
				} else {
					// wx.showToast({
					// 	title: '暂无数据',
					// })
					wx.hideLoading()
					this.$refs.uToast.show({
						title: head.msg,
						type: 'error',
						duration: 1000,
					})
					return
				}
			})
		},
		changeTime(e) {
			console.log(e)
			this.newDate = e.startDate + '-' + e.endDate
			this.getPatient(this.orgId, this.patientIdentity, e.startDate, e.endDate)
			this.formData.pageNo = 1
		},
		messageClick(i) {
			console.log(i, '当前点击')
			this.$router.navigateTo({
				url:
					'/pages/registrationMessage/particulars?parameter=' +
					JSON.stringify(i),
			})
		},
		confirm() {
			this.$router.switchTab({
				url: '/pages/index/index',
			})
		},

		// 下拉刷新
		onPullDownRefresh() {
			console.log(this.$refs, '123')
			this.$refs.calendar.startDate = ''
			this.$refs.calendar.today = ''
			this.$refs.calendar.endDate = getTime(0)
			this.newDate = ''
			this.formData.pageNo = 1
			this.dataList = []
			this.totalData = []
			// wx.showNavigationBarLoading()
			wx.showLoading({
				title: '加载中',
				mask: true,
			})
			this.getPatient(this.orgId, this.patientIdentity, '', '')
		},
		// 上拉加载
		onReachBottom() {
			let NumPage = Math.ceil(this.totalData.length / this.formData.pageNumber)
			console.log(NumPage, this.formData.pageNo)
			if (this.formData.pageNo == NumPage) {
				wx.showToast({ title: '暂无更多' })
			} else {
				this.formData.pageNo++
				// 滚动时的条数到第几条结束
				let pageSizeSum = this.formData.pageNo * this.formData.pageNumber
				let pageNoSum = (this.formData.pageNo - 1) * this.formData.pageNumber
				this.newDataList = this.totalData.slice(pageNoSum, pageSizeSum)
				this.dataList.push(...this.newDataList)
				console.log(this.dataList, '123', this.newDataList)
			}
		},
	},
}
</script>

<style lang="scss">
// page {
// background-color: #dcdcdc;
// }
.content_message {
	margin-bottom: 20px;
	border-radius: 6px;
	// box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
	.message_box {
		display: flex;
		padding: 20rpx;
		align-items: center;
		background: #fff;
		margin-bottom: 20px;
		.message_name {
			flex: 1;
			font-size: 30rpx;
			view {
				color: rgb(182, 182, 182);
				padding: 4px;
				test {
					color: #000;
				}
			}
		}
	}
}
.paymentState {
	font-size: 36rpx;
	font-weight: bold;
}
.date_new {
	margin-top: 40rpx;
	border-width: 1px;
	border-color: #ecf5ff;
	border-style: dashed;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #5690fb;
	color: #fff;
	font-size: 16px;
	/* display: inline-block; */
	text-align: center;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>